<%@ page contentType="text/html; charset=UTF-8" language="java"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8" />
<title>图书管理系统</title>
<!-- 显示各个元素时需要首获取样式说明 -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="css/style.css" />

<style>
</style>
</head>

<body>



	<!-- 准备分页数据 -->
	<jsp:include page="pager.jsp">
		<jsp:param name="filter" value="true" />
		<jsp:param name="showJsp" value="list.jsp" />
		<jsp:param name="showJsp" value="list.jsp" />
		<jsp:param name="beanClassName"
			value="com.csxh.web.bookstore.bean.Book" />
	</jsp:include>

	<!-- 显示分页数据 -->
	<c:if test="${empty pager}">
		<h1>没有数据</h1>
	</c:if>
	<c:if test="${not empty pager}">


		<table class="table table-striped table-bordered table-hover">

			<thead>
				<tr>
					<!-- 准备查询表单 -->
					<td colspan="4">
						<form class="form form-inline" role="form">

                             <!-- 请求查询字段与表达式 -->
							<jsp:include page="sqlCondition.jsp">
								<jsp:param name="filter" value="true" />
								<jsp:param name="beanClassName"
									value="com.csxh.web.bookstore.bean.Book" />
								<jsp:param name="excludeFields" value="id,password"/>
							</jsp:include>
							
							
							<div class="form-group">
							
								<label for="query-field-name">查询字段</label> 
								<select id="query-field-name" name="fieldName" class="form-control">
								    <c:forEach items="${queryConditionList}" var="query" varStatus="status">
								       
								       <c:if test="${status.index eq 0}">
								          <option selected="selected" value="${query.fieldName}">${query.fieldText}</option>
								       </c:if>
								       <c:if test="${status.index gt 0}">
								          <option value="${query.fieldName}">${query.fieldText}</option>
								       </c:if>
								       
								    </c:forEach>
								     
								</select>
							</div>
							
							
							<div class="form-group">
								
								<!-- 该隐藏字段使用data-expression属性来保存字段与查询操作映射列表数据 -->
								<!-- 所有以data-xx名称的属性，都可以使用jQuery的data(xx)来获取其值 -->
								<input id="data-expression" type="hidden" name="expression" data-expression='${fieldQueryExpression}' >
								    
							    <select id="query-field-expression" name="expression" class="form-control">
							       
							       <option value="&gt;">大于</option>
							       <option value="&lt;">小于</option>
							       <option value="=">等于</option>
							       <option value="&lt;&gt;">不等于</option>
							       <option value="like">包含</option>
							       <option value="not like">不包含</option>
							       
							    </select>
								
							</div>
							
							<div class="form-group">
							    
							    <input id="query-field-value" name="fieldValue" class="form-control" value="" >
							</div>
							
							<button type="submit" class="btn btn-default">查询</button>
						</form>

					</td>
				</tr>
				<tr>

					<th>图书名称</th>
					<th>图书作者</th>
					<th>图书价格</th>
					<th></th>

				</tr>

			</thead>

			<tbody>

				<c:forEach items="${pager.beanList}" var="book">

					<tr>

						<td>${book.name}</td>
						<td>${book.author}</td>
						<td>${book.price}</td>
						<td><input type="hidden" name="id" value="${book.id}">
							<button id="btn-update" class="btn btn-info">更改</button>
							<button id="btn-update" class="btn btn-warn">删除</button></td>

					</tr>

				</c:forEach>

			</tbody>

			<tfoot>

				<tr>

					<td colspan="3">${pager.navUrl}</td>
					<td>
						<button id="btn-add" class="btn btn-success">添加</button>
					</td>

				</tr>
			</tfoot>

		</table>
		<!-- 结束显示分页数据 -->
	</c:if>


	<!-- 当document对象生成之后，再使用js代码操作它 -->
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript">
	
	   //当document对象生成后执行以下方法
	   $(document).ready(function(){
		  //初始化查询操作选项
		  //获取被选中的字段名称
		  var option=$('#query-field-name :selected');
		  var fieldName=option.val();
		   //根据查询字段，生成对应查询操作列表
		  //alert(fieldName);
		  //直接获取json对象
		  var data=$("#data-expression").data("expression");
		  var expressionList=data[fieldName];
		  $('#query-field-expression').empty();
		  //构建查询的操作选项
		  for(var index in expressionList){
			  var expName=expressionList[index];
			  var expText=expName;
			  $('#query-field-expression').append('<option value="'+expName+'" >'+expText+'</option>');  
		  }
		
		//两级联动操作
		   $('#query-field-name').change(function(){
			  //获取选中的查询字段
			  var fieldName=$('#query-field-name option:selected').val();
			  //根据查询字段，生成对应查询操作列表
			  //alert(fieldName);
			  //直接获取json对象
			  var data=$("#data-expression").data("expression");
			  var expressionList=data[fieldName];
			  $('#query-field-expression').empty();
			  //构建查询的操作选项
			  for(var index in expressionList){
				  var expName=expressionList[index];
				  var expText=expName;
				  $('#query-field-expression').append('<option value="'+expName+'" >'+expText+'</option>');  
			  }
			  
		   });	

		
	   });
	   
	   	
	</script>
</body>

</html>
